<template>
	<view class="panel" :style="{ background: inactiveColor }">
		<view 
			class="panel-item"
			:class="{ active:  value === it.value}"
			:style="{
				background: value === it.value ? activeColor : 'inherit',
				color: value === it.value ? activeTextColor : inactiveTextColor,
			}"
			v-for="(it, index) in options" 
			:key="index"
			@click="change(it, index)"
		>{{ it.text }}</view>
	</view>
</template>

<script>
export default {
	name: "TabPanel",
	props: {
		value: {
			type: [Number, String],
			default: ''
		},
		mode: {
			type: String,
			default: "tabNav1"
		},
		inactiveColor: {
			type: String,
			default: "#DFE8F5"
		},
		activeColor: {
			type: String,
			default: "linear-gradient(to right, #5195F5, #2458F5)"
		},
		inactiveTextColor: {
			type: String,
			default: "#333"
		},
		activeTextColor: {
			type: String,
			default: "#fff"
		},
		options: {
			type: Array,
			default: () => []
		},
		loading: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		change(it, index){
			if(this.loading) return;
			this.$emit("change",{
				value: it.value,
				index,
				item: it
			})
		}
	}
}
</script>

<style scoped lang="scss">
.panel{
	height: 70rpx;
	line-height: 70rpx;
	display:flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 20rpx;
	&-item{
		text-align: center;
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
		&.active{
			color: #fff;
			position: relative;
			&::after{
				content: "";
				position: absolute;
				top: -10rpx;
				right: 0;
				left:0;
				bottom: -10rpx;
				z-index: 0;
				border-radius: 20rpx;
			}
		}
	}
}
</style>